<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
    <div id="bar" style="width:60%; height:500%;"></div>
    <div id='total'></div> 
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
        //var ttl = 0

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 2000);
                setInterval(get, 2000)


            }
        );
        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://10.10.0.1:5000/barChart",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
        function get() {
            
            $.ajax({
                type: "GET",
                url: "http://10.10.0.1:5000/ttl",
                //dataType: 'json',
                success: function (result) {
                    //ttl = result;
                    document.getElementById('total').innerHTML = "MAC总数："+result;
                }
            });
        }


    </script>
    
</body>
</html>